<template>
  <div class="chart-container hide-scroller-bar">
    <div style="height: 22%; min-height: 160px">
      <CurrentFlow />
    </div>
    <div style="height: 26%; min-height: 160px">
      <StreamTrend />
    </div>
    <div style="height: 32%; min-height: 220px">
      <VisitorInfo />
    </div>
    <div style="height: 18%; min-height: 120px">
      <CurrentPeak />
    </div>
    <template v-if="$store.getters.dataVMobile">
      <div style="height: 35%; min-height: 200px">
        <DestinationRank />
      </div>
      <div style="height: 30%; min-height: 160px">
        <VisitorChange />
      </div>
      <div style="height: 35%; min-height: 200px">
        <VisitorRecord />
      </div>
    </template>
  </div>
</template>

<script>
import { defineComponent } from "vue";
// 实时人流、车流数据
import CurrentFlow from "./CurrentFlow.vue";
// 人流趋势
import StreamTrend from "./StreamTrend.vue";
// 拥有进入资格的员工进入数与登记访客进入数
import VisitorInfo from "./VisitorInfo.vue";
// 当日人流峰值
import CurrentPeak from "./CurrentPeak.vue";

// 昨日访客目的地排行
import DestinationRank from "./DestinationRank.vue";
// 近1月访客量变化
import VisitorChange from "./VisitorChange.vue";
// 访客来访记录
import VisitorRecord from "./VisitorRecord.vue";

export default defineComponent({
  name: "FlowLeft",
  components: {
    CurrentFlow,
    StreamTrend,
    VisitorInfo,
    CurrentPeak,
    DestinationRank,
    VisitorChange,
    VisitorRecord,
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
